import React, { FC, PropsWithChildren, MutableRefObject, useRef, useEffect, useState } from 'react'
import { Button, message, TreeSelect, Form } from 'antd'
import {
  ModalForm,
  ProFormText,
  ProFormDigit,
  ProFormRadio,
} from '@ant-design/pro-form'
import { ActionType } from '@ant-design/pro-table'
import type { ProFormInstance } from '@ant-design/pro-form'
import { ModelFormModeEnum } from '@/enums/ModelFormModeEnum'
import { MenuTreeDTO } from '@/model/auth/MenuTreeDTO'
import { addMenu, updateMenu } from '@/api/auth/menu'

interface MenuFormParam {
  mode: ModelFormModeEnum,
  row?: MenuTreeDTO,
  allMenu: Array<MenuTreeDTO>
  actionRef: MutableRefObject<ActionType>
}

const MenuForm: FC<MenuFormParam> = (props: PropsWithChildren<MenuFormParam>) => {
  const { mode, row, allMenu, actionRef } = props
  const formRef = useRef<ProFormInstance>()
  useEffect(() => {
    if (row?.parentId === 0) {
      row.parentId = null
    }
    formRef.current?.setFieldsValue(row)
    const selectedKeyTemp = []
    const treeMenuTransForm = (menu: MenuTreeDTO) => {
      if (menu.check) selectedKeyTemp.push(menu.id)
      const menuTree = {
        title: menu.name,
        value: menu.id,
        children: menu?.children?.map((item) => {
          return treeMenuTransForm(item)
        }),
      }
      return menuTree
    }
    setTreeMenu(allMenu?.map((item) => {
      return treeMenuTransForm(item)
    }))
  }, [row, allMenu])

  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 14 },
  }

  const [treeMenu, setTreeMenu] = useState([])

  return (
    <div className="menu-form">
      <ModalForm<MenuTreeDTO>
        formRef={formRef}
        title={ModelFormModeEnum.add === mode ? '新增' : '编辑'}
        trigger={
          <Button type={ModelFormModeEnum.add === mode ? 'primary' : 'link'}>
            {ModelFormModeEnum.add === mode ? '新增' : '编辑'}
          </Button>
        }
        layout="horizontal"
        {...formItemLayout}
        onFinish={async (values) => {
          const newValues = {
            ...values,
            parentId: values.parentId | 0,
          }
          if (mode === ModelFormModeEnum.add) await addMenu(newValues)
          else if (mode === ModelFormModeEnum.update) await updateMenu(newValues)
          message.success(`${ModelFormModeEnum.add === mode ? '新增' : '编辑'}成功`)
          formRef?.current?.resetFields()
          await actionRef.current.reload()
          return false
        }}
      >
        <ProFormText
          name="id"
          label="id"
          placeholder="id"
          hidden
        />
        <ProFormText
          name="code"
          label="菜单code"
          placeholder="菜单code"
          rules={[{ required: true, message: '菜单code' }]}
        />
        <ProFormText
          name="name"
          label="菜单名称"
          placeholder="菜单名称"
          rules={[{ required: true, message: '菜单名称' }]}
        />
        <Form.Item
          name="parentId"
          label="父级菜单"
        >
          <TreeSelect
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={treeMenu}
            placeholder="父级菜单"
            treeDefaultExpandAll
            allowClear
          />
        </Form.Item>
        <ProFormText
          name="path"
          label="菜单路径"
          placeholder="菜单路径"
          rules={[{ required: true, message: '菜单路径' }]}
        />
        <ProFormDigit
          name="weight"
          label="权重"
          placeholder="权重"
          rules={[{ required: true, message: '权重' }]}
          fieldProps={{ precision: 0 }}
          min={1}
        />
        <ProFormText
          name="iconClass"
          label="图标"
          placeholder="图标"
        />
        <ProFormRadio.Group
          label="是否是菜单"
          name="isMenu"
          initialValue={2}
          options={[
            {
              label: '是',
              value: 1,
            },
            {
              label: '否',
              value: 2,
            },
          ]}
          rules={[{ required: true, message: '是否是菜单' }]}
        />
      </ModalForm>
    </div>
  )
}

export default MenuForm
